<template>
  <div>
    <div style="display:grid;grid-template-columns: 50% 20% 30%;padding: 10px;">
      <my-input v-model="article.title" placeholder="标题" >
        <my-select dict="ARTICLE_TYPE_DICT" style="width: 100px;" v-model="article.type" slot="prepend" placeholder="类型"></my-select>
      </my-input>
      <div>
        <span style="color: #F56C6C;font-size: 12px;line-height: 28px;padding-left: 10px" v-show="valid">* 请选择类型并输入标题</span>
      </div>
      <div style="text-align: right">
        <my-button type="primary" v-permission="'CREATE'" @click="saveArticle">保存</my-button>
      </div>
    </div>
    <div id="editor">
      <mavon-editor class="mavon-editor" ref="editor" :toolbars="toolbars" :ishljs="true" :tabSize="2" v-model="article.content"></mavon-editor>
    </div>
  </div>
</template>

<script>
  import { mavonEditor } from 'mavon-editor'
  import 'mavon-editor/dist/css/index.css';
  export default {
    name: "article-index",
    components: {
      'MavonEditor': mavonEditor
    },
    data() {
      return {
        toolbars: {
          bold: true, // 粗体
          italic: true, // 斜体
          header: true, // 标题
          underline: true, // 下划线
          strikethrough: true, // 中划线
          mark: false, // 标记
          superscript: false, // 上角标
          subscript: false, // 下角标
          quote: true, // 引用
          ol: true, // 有序列表
          ul: true, // 无序列表
          link: true, // 链接
          imagelink: false, // 图片链接
          code: true, // code
          table: true, // 表格
          fullscreen: true, // 全屏编辑
          readmodel: false, // 沉浸式阅读
          htmlcode: true, // 展示html源码
          help: false, // 帮助
          /** 1.3.5 **/
          undo: true, // 上一步
          redo: false, // 下一步
          trash: false, // 清空
          save: false, // 保存（触发events中的save事件）
          /** 1.4.2 **/
          navigation: false, // 导航目录
          /** 2.1.8 **/
          alignleft: true, // 左对齐
          aligncenter: true, // 居中
          alignright: true, // 右对齐
          /** 2.2.1 **/
          subfield: true, // 单双栏模式
          preview: true, // 预览
          boxShadow: false
        },
        article:{
          title: '',
          type: '',
          content: ''
        },
        valid: false,
      };
    },
    methods: {
      saveArticle(){
        if(this.article.type != null && this.article.type+'' != '' && this.article.title != null && this.article.title.trim() != ''){
          this.valid = false;
          if(!this.article.content){
            this.$notify.warning('文章内容不能为空!');
            return;
          }
          this.$ajax.saveArticle(this.article).then(()=>{
            this.$message.success('新增成功');
            this.article = {
              title: '',
              type: '',
              content: ''
            }
          })
        }else{
          this.valid = true;
        }
      }
    },
    mounted() {

    },

  }
</script>

<style lang="scss" scoped>
  ::v-deep.article-title input{
    width: 500px;
    border: none;
    border-bottom: 1px solid #D9D9DE;
    border-radius: 0px;
    height: 10vh;
    line-height: 10vh;
    padding: 10px;
  }
  #editor{
    height: 79vh;
    overflow-y: auto;
    padding: 5px 10px;
  }
  .mavon-editor{
    height: 100%;
    width: 100%;
  }
</style>
